<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯光与gui、spectrum的玩法</title>
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../spectrum.css">
    <script src="../spectrum.js"></script>
    <script src="../dat.gui.js"></script>
    <script src="../three.min.js"></script>
    <style>
        #webGL {
            width: 800px;
            height:500px;
        }
    </style>
</head>
<body onload="initWebGL();">
    <div id="webGL">

    </div>
    <input type="text" id="custom">
    <script>
        const width = document.getElementById("webGL").clientWidth
        const height = document.getElementById("webGL").clientHeight
                
        var gui
        var param
        function gui_init() {
            gui = new dat.GUI()
            var ParamSet = function() {
                this.x = 0
            }
            param = new ParamSet()
            gui.add(param,"x",-5,5).name("x轴")
        } 
        var renderer;
        function initRenderer() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            })
            renderer.setSize(width,height)
            renderer.setClearColor(0xffffff, 1.0);
            document.getElementById("webGL").appendChild(renderer.domElement)
        }
        var light;
            function initLight() {
                // A start
                // 第二个参数是光源强度，你可以改变它试一下
                /*
                light = new THREE.DirectionalLight(0xff0000,1);
                // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
                light.position.set(0,0,1);
                scene.add(light);*/
                // A end
                light = new THREE.PointLight(0xff0000,1,200,0)
                light.position.set(0,0,-110)
                scene.add(light)
            }
        var scene;
        function initScene() {
            scene = new THREE.Scene()
        }
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45,width/height,0.1,2000)
            camera.position.set(800,800,800)
            camera.up.set(0,1,0)
            camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
        }        
        var mesh;
        function initMesh() {
            var boxGeometry = new THREE.BoxGeometry(100,100,100)
            var boxMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
            mesh = new THREE.Mesh(boxGeometry,boxMaterial)
            mesh.position.set(0,0,0)
            scene.add(mesh)
            let mesh1 = new THREE.Mesh(boxGeometry,boxMaterial)
            mesh1.position.set(0,0,-200)
            scene.add(mesh1)

            let mesh2 = new THREE.Mesh(boxGeometry,boxMaterial)
            mesh2.position.set(180,0,-200)
            scene.add(mesh2)

            let mesh3 = new THREE.Mesh(boxGeometry,boxMaterial)
            mesh3.position.set(-180,0,-200)
            scene.add(mesh3)
            /*
            mesh.position.set(200,-200,0)
            scene.add(mesh)
            mesh.position.set(-200,200,0)
            scene.add(mesh)*/
            //console.log(mesh,scene)
        }
        function render() {
            requestAnimationFrame(render)
            renderer.clear()
            renderer.render(scene, camera);
        }
        function initWebGL() {
            initRenderer()
            initScene()
            initCamera()
            initMesh()
            initLight()
            render()
        }
        gui_init()
    </script>
    
    <script>
        $("#custom").spectrum({color:"#f00",
        preferredFormat:'hex',
        showInput:true,
        showInitial:true,
        showPalette:true,
        showSelectionPalette:true,
        hide:function(tinycolor) {
            console.log(tinycolor.toHex())
        }
    })
    </script>
</body>
</html>